<template>
	<div class="main-box minHeight"  v-loading="loading">
		<div class="dl-row mar-bottom-20">
			<div class="search-box" style="margin-right: 20px">
				<el-input
						placeholder="请输入课程关键词"
						prefix-icon="el-icon-search"
						clearable
						@clear="init()"
						v-model="courseName">
				</el-input>
			</div>
			<el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div v-if="data.length>0" v-cloak>
			<div class="class-list dl-row-sb end" v-for= "(item,index) in data" :key="index">
				<div class="dl-row center">
				  <img :src="item.themeImage">
				  <div style="width: 540px;height: 100px;" class="dl-column-sa">
					<h1>{{item.courseName}}</h1>
					<ul data-v-7450f29b="" class="sea-btn-blue">
					  <li data-v-7450f29b=""><i class="el-icon-time"></i>&nbsp;上次学至：{{item.courseResourceName}}</li>
					<!--  <li data-v-7450f29b="">{{item.resourceDuration}}</li> -->
					</ul>
<!-- 				  <ul class="sea-btn-blue" style="margin: 0px 0px 10px 0px;width: 99%;">
					<el-progress :text-inside="true" text-color="#fff" :stroke-width="16" :color="customColors" :percentage="item.nowStudyPercent"></el-progress>
				  </ul> -->
					<span class="text">学习时间：{{item.updateTime}}</span>
				  </div>
				</div>
			  <div class="dl-column center right-btn mar-bottom-20">
					<el-button type="success" round @click="continueStudy(item)"><i class="el-icon-position"></i>&nbsp;继续学习</el-button>
			  </div>
			</div>
			<el-pagination
					:total="total"
					:current-page="page + 1"
					style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes"
					@size-change="sizeChange"
					@current-change="pageChange"/>
		</div>
		
		
		<div class="note-box mar-top-20" v-if="data.length==0 && !loading">
			<el-empty class="empty"  :image-size="250" :image="require('../../../assets/no_data_images/no_course.png')" description="无学习历史"></el-empty>
		</div>
	</div>
</template>

<script>
	import initData from '@/mixins/initData'
	export default {
	  mixins: [initData],
	  data() {
		return {
		  classImg: require('../../../assets/image/u38.jpg'),
		  loading:false,
		  show:false,
		  courseName:"",
		  customColors: [
			{color: '#F97960', percentage: 20},
			{color: '#e6a23c', percentage: 40},
			{color: '#5cb87a', percentage: 60},
			{color: '#0068B6', percentage: 80},
			{color: '#5cb87a', percentage: 100}
		]
		}
	  },
	  mounted() {
	  	
	  },
	  created() {
	  	this.$nextTick(() => {
			this.init()
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'course/study-record-details/history'
		    this.params = {
		      page: this.page,
		      size: this.size,
		      courseName: this.courseName
		    }
		    return true
		},
		// toDetail(id) {
		//   this.$router.push({path:'/course/detail',
		//   query:{
		//   	"courseId":id
		//   }
		//   })
		// },
		continueStudy(item){
			//this.$router.push({ path: "/course/video", query: { id: item.courseResourceId,courseId:item.courseId} });
			//定义一个路径
			  const href = this.$router.resolve({
			  	path: '/course/detail',
			  	query: { "courseId":item.courseId },
			  }).href;
			//打开新的页面 到 href 这个页面
			window.open(href, "_blank");	
		},
		getImage(obj){
			var array=eval('(' + obj.themeImage + ')');
			var imageUrl="";
			if(array.length>0){
				imageUrl=array[0].url;
			}
			return imageUrl;
		}
	  },
	}
</script>
<style scoped>
	[v-cloak] {
	    display:none;
	}
	.class-list{
		cursor: pointer;
	}
	.empty{
		 height: calc(100vh - 537px);
	}
	.minHeight{
		min-height: calc(100vh - 254px);
	}
  .class-list h1{
    margin-bottom: 0;
  }
  .sea-btn-blue {
	  padding-top: 10px;
  } li{
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  width: 99%;
  }
</style>